<template>
	<body>
			<section>
				<div class="wrapper">
					<div class="userform">
						<div class="loginform">
							<h2><span>注册</span><router-link to="/login">丨登录</router-link></h2>
							<form action="" :model="form" class="form-logo">
								<p><input type="text" class="username" id="txtinfor" v-model="form.username" placeholder="请输入用户名" /></p>
								<p><input type="password" class="psd" id="txtinfor" v-model="form.password" placeholder="请输入密码" /></p>
								<p><input type="password" class="psd" id="txtinfor" v-model="repassword" placeholder="再次输入密码" /></p>
								<p><input type="email" class="email" id="txtinfor" v-model="form.email" placeholder="请输入邮箱" /></p>
								<p><input type="checkbox" class="ckbox"  value="" checked="" />我已读阅并同意</p>
								<p>有账号，请<router-link to="/login"><span id="red">登录</span></router-link><el-button type="danger" class="loginbt" @click="register()">注册</el-button></p>
							</form>
						</div>
					</div>
				</div>
			</section>
		</body>
</template>

<script>
  import request from "@/utils/request.js";
  import {ElMessage} from "element-plus";
  import router from "@/router/index.js";

  export default {
    data(){
      return{
        form: {},
        repassword: '',
        // rules: {
        //   username: [
        //     {required: true, message: '请输入用户名', trigger: 'blur'},
        //     {min: 4, max: 10, message: '用户名长度4-10字符', trigger: 'blur'}
        //   ],
        //   password:[
        //     {required: true, message: '请输入密码', trigger: 'blur'},
        //     {min: 6, max: 10, message: '用户名长度4-10字符', trigger: 'blur'}
        //   ],
        //   email: [
        //     {required: true, message: '请输入邮箱地址', trigger: 'blur'},
        //     {pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确邮箱地址', trigger: 'blur'}
        //   ]
        // }
      }
    },
    methods: {
      register(){
        request.post("/api/userRegister", this.form,{
          params:{
            repassword: this.repassword
          }
        }).then(
            res => {
              console.log("res=", res)
              // console.log(!res.data.username)
              if (res.code === "533"){
                if (res.data.username){
                  ElMessage({
                    message: res.data.username,
                    type: 'error',
                  })
                }
                if (res.data.password){
                  ElMessage({
                    message: res.data.password,
                    type: 'error',
                  })
                }
                if (this.repassword != this.form.password){
                  ElMessage({
                    message: "两次密码不相同",
                    type: 'error',
                  })
                }
                // if (res.data.repassword){
                //   ElMessage({
                //     message: res.data.repassword,
                //     type: 'error',
                //   })
                // }
                if (res.data.email){
                  ElMessage({
                    message: res.data.email,
                    type: 'error',
                  })
                }
              }
              if (res.code === "200"){
                ElMessage({
                  message: '注册成功',
                  type: 'success',
                })
                this.form= {};
                router.push("/login");
              }

            }
        )
      }
    }
  }
</script>

<style>
</style>